<template>
  
  <div class="scrollwarp" :style='{ height }'>
    <div>
        <div class="warp">
            <Serch :background=background></Serch>
            <div class="shihuo">
                <div class="tit">
                  <b>品牌特卖</b>
                  <p>更多品牌></p>
                </div>
                <ul class="entrance">
                      <li @click="lanq">
                          <img src="http://shihuo.hupucdn.com/appHome/201711/0113/705803887a16991348788bc77ef96298.png" alt="">
                          <p>篮球</p>
                      </li>
                      <li @click="caol">
                          <img src="http://shihuo.hupucdn.com/appHome/201711/0113/ed229a3887b997986de9d2fa99968f2c.png" alt="">
                          <p>潮流</p>
                      </li>
                      <li @click="fus">
                          <img src="http://shihuo.hupucdn.com/appHome/201711/0113/3be9bb6590b50ae4c2c823353ebd1bb9.png" alt="">
                          <p>服饰</p>
                      </li>
                      <li @click="sm">
                          <img src="http://shihuo.hupucdn.com/appHome/201711/0113/26a9c61773702db21dbe4b9d9a5bed60.png" alt="">
                          <p>数码</p>
                      </li>
                      <li>
                          <img src="http://shihuo.hupucdn.com/appHome/201711/0113/487a7ff8df880418d15d3db5e4608a0f.png" alt="">
                          <p>更多</p>
                      </li>
                </ul>
                <div class="brand">
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/goods/style/201708/1716/a8418a3ae650e7c5c76eea45f2a2bcc1.png" alt=""></p>
                      <p>日高</p>
                      <p>定金50抵450</p>
                    </div>
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/goods/style/201708/1716/4ef177124aa7ba5eb5d6ef5c135ae057.png" alt=""></p>
                      <p>匹克</p>
                      <p>不止5折</p>
                    </div>
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/newslogo/201710/1814/cd232408542a3bafc7eb464f74909171.jpg" alt=""></p>
                      <p>dickies</p>
                      <p>满11减10元</p>
                    </div>
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/goods/style/201708/1716/6c79a6f7612a56c851451ca0f0929025.png" alt=""></p>
                      <p>铭瑄</p>
                      <p>虎扑专享满600减180</p>
                    </div>
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/goods/style/201708/1716/bf41e50f5ace374682d8f9e104a9a953.png" alt=""></p>
                      <p>UA</p>
                      <p>虎扑专享满600减180</p>
                    </div>
                    <div>
                      <p><img src="http://shihuo.hupucdn.com/newslogo/201710/2312/e08733467eb951d4ff57debfbf97396e.jpg" alt=""></p>
                      <p>Sony索尼</p>
                      <p>满48减10</p>
                    </div>
                </div>
            </div>
            <div class="advert">
                  <div class="box">
                    <img src="http://shihuo.hupucdn.com/appHome/201902/0323/6de7db22aecf585cf2544cafd24c2bf9.png" alt="">
                  </div>
            </div>
            <div class="preferential">
                  <b>特惠活动</b>
                  <span>24小时淘不停</span>
                  <Disitems :disitems="disitems"></Disitems>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
//引入滚动
import BetterScroll from "better-scroll";
//引入搜索
import Serch from "@/components/Header/Serch"
//引入特惠详情
import Disitems from "@/components/Discountitems/Disitems"


export default {
  data () {
    return {
        disitems:[],
        background:{
            background:'#f0f3f5'
        },
        height:0,
        //滚动对象
        scroll:null,
    }
  },
  components: {
    Serch,
    Disitems,
    
  },
  
  mounted() {
    let url = "http://localhost:8080/data/discounts.json";
    this.$axios.get(url).then((ret) => {
      // console.log(ret.data);
      this.disitems = ret.data;
    //   console.log(this.disitems);
    });
    //外层滚动容器高度
    this.height = document.documentElement.clientHeight - 51 + 'px'
    // console.log(this.height);
    
  },
  methods: {
    lanq(){
        this.$router.push({ name: "disitemslist"});
    },
    caol(){
        this.$router.push({ name: "trend"});
    },
    fus(){
        this.$router.push({ name: "clothes"});
    },
    sm(){
        this.$router.push({ name: "digital"});
    }
  },
  beforeDestroy(){
    this.scroll = null;
  },
  updated() {
    this.$nextTick(()=>{
      this.scroll = new BetterScroll('.scrollwarp',{
        click: true,
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.warp{
  width: 100%;
  background: #f0f3f5;
  // height:700px
  .shihuo{
    background: #fff;
    padding: 15px;
    .tit{
      width: 100%;
      height: 21px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      b{
        
        color: #333;
        font-size: 14px;  
      }
      p{
        
        font-size: 12px;
        color: #999;
      }
    }
  }
  .entrance{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top:13px;
      width:100%;
      li{
        height: 70px;
        width: 49px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img{
          width:48px;
          height:48px;
        }
        p{
          width:48px;
          height:19px;
          text-align: center;
          font-size: 13px;
          color:#333
        }
      }
  }
  .brand{
    width: 100%;
    height: 235px;
    div{
      width: 110px;
      height: 110px;
      float: left;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top:8px;
      margin-right: 5px;
      p:nth-of-type(1){
        width: 35px;
        height: 35px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 5px;
        img{
          height:100%;
       }
      }
      p:nth-of-type(2){
          font-size: 14px;
          color:#FFF;
        margin-bottom: 5px;
      }
      p:nth-of-type(3){
          text-align: center;
          width:85px;
          background: #ff4338;
          border-radius: 30px;
          font-size: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top:3px;
          color:#FFF;
      }
    }
    div:nth-of-type(1){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0811/8b50d3b1734f11c83f911a361c96d1b9.jpg");
        background-size: 100% 100%;
    }
    div:nth-of-type(2){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0612/71cd68692b56ab4bd992716e2c010270.jpg");
        background-size: 100% 100%;
    }
    div:nth-of-type(3){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0612/ecbb92938c6c2e81bf6d4825f82b5fd9.jpg");
        background-size: 100% 100%;
    }
    div:nth-of-type(4){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0811/8f97c03a7fd2604d27568b087b8b5b59.jpg");
        background-size: 100% 100%;
    }
    div:nth-of-type(5){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0811/985b1e7d8fc8eddc2a80c2b8b309ac2d.jpg");
        background-size: 100% 100%;
    }
    div:nth-of-type(6){
        background-image: url("http://shihuo.hupucdn.com/appHome/201801/0612/6751d06bc35a2e370f97982491bde549.jpg");
        background-size: 100% 100%;
    }
  }
  .advert{
    margin-top: 10px;
    padding: 15px;
    background: #fff ;
    .box{
        display: flex;
        width: 100%;
        border-radius: 30px;
        overflow: hidden;
        img{
          width: 100%;
        }
    }
  }
  .preferential{
      background: #fff ;
      padding: 14px;
      b{
          font-size:14px;
          margin-right: 5px;
      }
      span{
        font-size: 12px;
        color: #999;
        margin-bottom:15px;
      }
  }
}
  .scrollwarp{
    // width: 100%;
    overflow: hidden;
  }
</style>